<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title dir="rtl">BIENVENIDO AL INTRANET DEL CLUB</title>

	<link rel="stylesheet" type="text/css" href="css/estilos.css" />
	<script src="http://maps.google.com/maps/api/js?sensor=true"
		type="text/javascript"></script>

	<script type="text/javascript">  
			var currentMarker = null;  
			  
			function handlePointClick(event) {  			
				if(currentMarker != null) {
				    currentMarker.setMap(null);
				    currentMarker = null;
				}
				
				if(currentMarker == null) {  
					document.getElementById('lat').value = event.latLng.lat();  
					document.getElementById('lng').value = event.latLng.lng();  
		  
					currentMarker = new google.maps.Marker({  
						position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())  
					});  
					
					map.addOverlay(currentMarker);  
		  
					dlg.show();  
				}   
			}  
			
			function markerAddComplete() {  
				var direccion = document.getElementById('direccion');  
				currentMarker.setTitle(direccion.value);  
				direccion.value = "";  
		   
				dlg.hide();  
			}  
		  
			function cancel() {  
				dlg.hide();
				currentMarker.setMap(null);
				currentMarker = null;
				return false;  
			}
			
		</script>


</h:head>


<h:body>
	<h:form>
		<h:panelGrid width="100%">
			<h:outputText value="REGISTRO DE SOCIOS" />
			<p:accordionPanel id="acpDatosPersonales" multiple="true">
				<p:tab title="Datos Personales" id="tabDatosPersonales">
					<h:panelGrid columns="4" id="pnlDatosPersonales">
						<h:outputText value="Nombre (*)" />
						<p:spacer width="15" height="25" />
						<h:inputText style="width:500px"
							value="#{mantenimientoSocioAction.socioBean.nombres}" />
						<h:outputText value="#{mantenimientoSocioAction.msgValNombres}" />

						<h:outputText value="Apellido Paterno (*)" />
						<p:spacer width="15" height="25" />
						<h:inputText style="width:500px"
							value="#{mantenimientoSocioAction.socioBean.apellidoPaterno}" />
						<h:outputText value="#{mantenimientoSocioAction.msgValApePaterno}" />

						<h:outputText value="Apellido Materno (*)" />
						<p:spacer width="15" height="25" />
						<h:inputText style="width:500px"
							value="#{mantenimientoSocioAction.socioBean.apellidoMaterno}" />
						<h:outputText value="#{mantenimientoSocioAction.msgValApeMaterno}" />

						<h:outputText value="DNI (*)" />
						<p:spacer width="15" height="25" />
						<h:inputText style="width:100px"
							value="#{mantenimientoSocioAction.socioBean.dni}" />
						<h:outputText value="#{mantenimientoSocioAction.msgValDni}" />
					</h:panelGrid>
				</p:tab>
				<p:tab title="Datos Contacto" id="tabDatosContacto">
					<h:panelGrid columns="4" id="pnlDatosContacto">
						<h:outputText value="Telefono(*)" />
						<p:spacer width="15" height="25" />
						<h:inputText style="width:100px"
							value="#{mantenimientoSocioAction.socioBean.telefono}" />
						<h:panelGrid columns="4">
							<h:outputText value="#{mantenimientoSocioAction.msgValTelefono}" />
							<p:spacer width="30" height="25" />
							<h:outputText value="Telefono Opcional" />
							<h:inputText style="width:100px"
								value="#{mantenimientoSocioAction.socioBean.telefonoOpcional}" />
						</h:panelGrid>

						<h:outputText value="Email (*)" />
						<p:spacer width="15" height="25" />
						<h:inputText style="width:100px"
							value="#{mantenimientoSocioAction.socioBean.email}" />
						<h:outputText value="#{mantenimientoSocioAction.msgValEmail}" />
					</h:panelGrid>
				</p:tab>
				<p:tab title="Datos Ubicación" id="tabDatosUbicacion">
					<h:panelGrid columns="4" id="pnlDatosUbicacion">

						<h:outputText value="Dirección (*)" />
						<p:spacer width="15" height="25" />
						<p:gmap id="gmap" center="#{mantenimientoSocioAction.geoCenter}"
								zoom="8" type="HYBRID" style="width:600px;height:400px"
								model="#{mantenimientoSocioAction.emptyModel}"
								onPointClick="handlePointClick(event);" widgetVar="map" />
						<h:outputText value="#{mantenimientoSocioAction.msgValDireccion}" />
						

						<h:outputText value="Departamento (*)" />
						<p:spacer width="15" height="25" />
						<h:selectOneMenu
							value="#{mantenimientoSocioAction.socioBean.departamento}"
							effect="fade">
							<f:selectItem itemValue="-1" itemLabel="-- Seleccione --" />
							<f:selectItems
								value="#{mantenimientoSocioAction.listaDepartamentoBean}"
								var="dep" itemLabel="#{dep.nombre}" itemValue="#{dep.id}" />
							<p:ajax event="change" update="gmap"
								listener="#{mantenimientoSocioAction.updateMapCenter}" />
						</h:selectOneMenu>
						<h:outputText
							value="#{mantenimientoSocioAction.msgValDepartamento}" />

						<h:outputText value="Provincia (*)" />
						<p:spacer width="15" height="25" />
						<h:selectOneMenu
							value="#{mantenimientoSocioAction.socioBean.provincia}">
							<f:selectItem itemValue="-1" itemLabel="-- Seleccione --" />
							<f:selectItems value="#{mantenimientoSocioAction.itemsProvincia}" />
						</h:selectOneMenu>
						<h:outputText value="#{mantenimientoSocioAction.msgValProvincia}" />

						<h:outputText value="Distrito (*)" />
						<p:spacer width="15" height="25" />
						<h:selectOneMenu
							value="#{mantenimientoSocioAction.socioBean.distrito}">
							<f:selectItem itemValue="-1" itemLabel="-- Seleccione --" />
							<f:selectItems value="#{mantenimientoSocioAction.itemsDistrito}" />
						</h:selectOneMenu>
						<h:outputText value="#{mantenimientoSocioAction.msgValDistrito}" />

					</h:panelGrid>
				</p:tab>
			</p:accordionPanel>

			<div align="center" style="width: 900px">
				<h:panelGrid id="pngMensajeGeneral">
					<h:outputText value="#{mantenimientoSocioAction.mensaje}" />
				</h:panelGrid>
			</div>

			<div align="center" style="width: 900px">
				<p:commandButton value="Grabar"
					update="acpDatosPersonales, pngMensajeGeneral"
					action="#{mantenimientoSocioAction.validarGrabar}" />
			</div>
		</h:panelGrid>
	</h:form>


	<p:growl showDetail="true" autoUpdate="true" />

	<p:dialog widgetVar="dlg" effect="FADE" effectDuration="0.5"
		close="false" fixedCenter="true">
		<h:form prependId="false">
			<h:panelGrid columns="2">
				<h:outputLabel for="direccion" value="Direcci&oacute;n:" />
				<p:inputText id="direccion"
					value="#{mantenimientoSocioAction.socioBean.direccion}" />

				<f:facet name="footer">
					<p:commandButton value="Add"
						actionListener="#{mantenimientoSocioAction.addMarker}"
						oncomplete="markerAddComplete()" />
					<p:commandButton value="Cancel" onclick="return cancel()" />
				</f:facet>
			</h:panelGrid>

			<h:inputHidden id="lat"
				value="#{mantenimientoSocioAction.socioBean.latitud}" />
			<h:inputHidden id="lng"
				value="#{mantenimientoSocioAction.socioBean.longitud}" />
		</h:form>
	</p:dialog>



</h:body>

</html>